<template>
  <!-- hidden PageHeaderWrapper title demo -->
  <page-header-wrapper :title="false">
    <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
      <a-form @submit="handleAdd" :form="this.form">
        <a-form-item
          label="条目"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-input v-decorator="['name']" placeholder="请输入条目" name="name" />
        </a-form-item>
      
        <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
          <a-button htmlType="submit" type="primary" icon="check">添加</a-button>
          <!-- <a-button style="margin-left: 8px">{{ $t('form.basic-form.form.save') }}</a-button> -->
        </a-form-item>
      </a-form>
    </a-card>
    <a-card :body-style="{ padding: '24px 32px' }" title="工资条目列表">
      <a-table ref="table" size="default" rowKey="key" :columns="columns" :data-source="loadData">
        <span slot="action" slot-scope="text, record">
          <template>
            <a-tag color="#D15B47" @click="handleDel(record)">删除</a-tag>
          </template>
        </span>
      </a-table>
    </a-card>
    <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
      <a-form @submit="handleSubmit" :form="form1">
        <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
          <a-button htmlType="submit" type="primary" icon="check">保存设置</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </page-header-wrapper>
</template>
  <script>
export default {
  name: 'DetailSetting',
  data() {
    return {
      radioStyle: {
        display: 'block',
        height: '30px',
        lineHeight: '30px',
      },
      params: {
        buyType: 1,
        channelId: '',
        detailParamList: [],
        memo: '',
        orderDate: '',
        storeId: '',
        supplyId: '',
      },
      queryParam: {
        pageNo: 1,
        pageSize: 999,
        queryCondition: '',
        status: 1,
      },
      form: this.$form.createForm(this),
      form1: this.$form.createForm(this),
      columns: [
        {
          title: '条目',
          dataIndex: 'name',
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '220px',
          scopedSlots: { customRender: 'action' },
        },
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: [{name:'商品提成',},{name:'基本工资',},{name:'运营商提成',}],
    }
  },
  created() {

  },
  methods: {
   
    handleDel(record) {
      const that = this
      that.$confirm({
        title: '删除',
        content: '你确定要删除这个条目吗？',
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          that.loadData.splice(
            that.loadData.findIndex((item) => item.id === record.id),
            1
          )
          // this.loadData = this.loadData
        },
      })
    },
    handleAdd(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.loadData.push({name:values.name})
        }
      })
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form1.validateFields((err, values) => {
        if (!err) {
            this.$message.warn('接口开发中')
        }
      })
    },
  },
}
</script>